<template>
  <div class="main">
    <el-card class="ca-main">
      <div>
        <!--界面上侧-->
        <el-row :span="12">
          <div class="ro">
            <!--图片-->
            <el-col :span="10" class="co">
              <div class="im">
                <el-image
                  class="image"
                  src="src\assets\loginPic.jpg"
                ></el-image>
              </div>
            </el-col>
            <!--用户个人信息-->
            <el-col :span="14" class="co">
              <div class="id">
                <el-card class="idcard">
                  <el-divider content-position="left">个人信息</el-divider>
                  <div class="row1">
                    <div>
                      <el-text class="mx-1">姓名：</el-text
                      >{{ eldform.eldName }}
                    </div>
                    <div>
                      <el-text class="mx-1">性别：</el-text>
                      <template v-if="eldform.eldGender == '男'"> 男 </template>
                      <template v-if="eldform.eldGender == '女'"> 女 </template>
                    </div>
                    <div>
                      <el-text class="mx-1">年龄：</el-text>{{ eldform.eldAge }}
                    </div>
                  </div>
                  <div class="row1">
                    <div>
                      <el-text class="mx-1">身份证号：</el-text
                      >{{ eldform.eldIdNum }}
                    </div>
                    <div>
                      <el-text class="mx-1">联系电话：</el-text
                      >{{ eldform.eldPhone }}
                    </div>
                  </div>
                  <!--<div class="row1">
                    <div>
                      <el-text class="mx-1">住址：</el-text
                      >{{ eldform.address }}
                    </div>
                  </div>-->

                  <el-divider content-position="left">账户信息</el-divider>
                  <div class="row2">
                    <div>
                      <el-text class="mx-1">账号：</el-text
                      >{{ eldform.username }}
                    </div>
                    <div>
                      <el-text class="mx-1">密码：</el-text
                      >{{ eldform.password }}
                    </div>
                  </div>

                  <el-divider content-position="left">居住信息</el-divider>
                  <div class="row3">
                    <div>
                      <el-text class="mx-1">床号：</el-text>{{ eldform.eldBed }}
                    </div>
                    <div>
                      <el-text class="mx-1">护工：</el-text
                      >{{ eldform.nurseId }}
                    </div>
                  </div>
                  <div class="row3">
                    <el-button type="primary" size="small" @click="modifyeld()"
                      >修改</el-button
                    >
                  </div>
                </el-card>
              </div>
            </el-col>
          </div>
        </el-row>
        <el-divider />
        <!--家属表单-->
        <el-row :span="12">
          <h3>老人家属</h3>
          <el-row :span="18" class="ro">
            <div class="table-field">
              <el-table
                :data="tableData"
                height="120"
                max-height="120px"
                stripe
                style="width: 100%"
              >
                <el-table-column prop="faName" label="姓名" width="100px" />
                <el-table-column prop="faGender" label="性别" width="80px" />
                <el-table-column prop="faAge" label="年龄" width="80px" />
                <el-table-column prop="faRelation" label="关系" width="110px" />
                <el-table-column
                  prop="faIdnum"
                  label="身份证号"
                  width="180px"
                />
                <el-table-column
                  prop="faPhone"
                  label="联系电话"
                  width="180px"
                />
                <el-table-column prop="faMail" label="电子邮件" width="180px" />
                <el-table-column prop="operator" label="操作" width="200">
                  <template #default="scope">
                    <el-button
                      type="primary"
                      size="small"
                      @click="modifyfa(scope.row)"
                    >
                      修改
                    </el-button>
                    <el-button
                      type="primary"
                      size="small"
                      color="red"
                      @click="del(scope.row)"
                    >
                      删除
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-row>
          <el-row :span="6" class="ro">
            <el-button type="primary" class="bu" @click="addfa()">
              添加
            </el-button>
          </el-row>
        </el-row>
      </div>
    </el-card>
  </div>
  <!--更新个人信息弹窗-->
  <el-dialog
    v-model="dialogVisible1"
    title="更新个人信息"
    width="500"
    :before-close="handleClose"
    center
  >
    <el-card class="dia">
      <div class="dia">
        <el-form
          :v-model="altereld"
          label-width="auto"
          style="max-width: 500px"
        >
          <el-form-item label="老人姓名：">
            <el-input v-model="altereld.eldName" class="inp" />
          </el-form-item>
          <el-form-item label="身份证号：">
            <el-input v-model="altereld.eldIdNum" class="inp" />
          </el-form-item>
          <el-form-item label="性别：">
            <el-radio-group v-model="altereld.eldGender" class="inp">
              <el-radio value="女" size="large">女</el-radio>
              <el-radio value="男" size="large">男</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="年龄：">
            <el-input v-model="altereld.eldAge" class="inp" />
          </el-form-item>
          <el-form-item label="联系电话：">
            <el-input v-model="altereld.eldPhone" class="inp" />
          </el-form-item>
          <!-- <el-form-item label="家庭住址：">
            <el-input v-model="altereld.address" class="inp" />
          </el-form-item>-->
          <el-form-item label="账号：">
            <el-input v-model="altereld.username" class="inp" />
          </el-form-item>
          <el-form-item label="密码：">
            <el-input v-model="altereld.password" class="inp" />
          </el-form-item>
        </el-form>
      </div>
      <div class="dia-bt">
        <el-button type="primary" class="bu2" @click="changeeld()"
          >提交</el-button
        >
        <el-button type="primary" class="bu2" @click="dialogVisible1 = false"
          >取消</el-button
        >
      </div>
    </el-card>
  </el-dialog>
  <!--添加家属信息弹窗-->
  <el-dialog
    v-model="dialogVisible2"
    title="添加家属"
    width="500"
    :before-close="handleClose"
    center
  >
    <el-card class="dia">
      <div class="dia">
        <el-form :model="form" label-width="auto" style="max-width: 500px">
          <el-form-item label="姓名：">
            <el-input v-model="faform.faName" class="inp" />
          </el-form-item>
          <el-form-item label="身份证号：">
            <el-input v-model="faform.faIdnum" class="inp" />
          </el-form-item>
          <el-form-item label="性别：">
            <el-radio-group v-model="faform.faGender" class="inp">
              <el-radio value="0" size="large">女</el-radio>
              <el-radio value="1" size="large">男</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="年龄：">
            <el-input v-model="faform.faAge" class="inp" />
          </el-form-item>
          <el-form-item label="与老人关系：">
            <el-select
              v-model="faform.faRelation"
              placeholder="选择与老人关系"
              style="width: 220px"
            >
              <el-option
                v-for="item in relationselect"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <template v-if="faform.faRelation == 5">
            <el-form-item label="具体关系：">
              <el-input v-model="faform.faReldetails" class="inp" />
            </el-form-item>
          </template>
          <el-form-item label="联系电话：">
            <el-input v-model="faform.faPhone" class="inp" />
          </el-form-item>
          <el-form-item label="家庭住址：">
            <el-input v-model="faform.faMail" class="inp" />
          </el-form-item>
        </el-form>
      </div>
      <div class="dia-bt">
        <el-button type="primary" class="bu2" @click="faddfa()">提交</el-button>
        <el-button type="primary" class="bu2" @click="dialogVisible2 = false"
          >取消</el-button
        >
      </div>
    </el-card>
  </el-dialog>
  <!--修改家属信息弹窗-->
  <el-dialog
    v-model="dialogVisible3"
    title="修改家属"
    width="500"
    :before-close="handleClose"
    center
  >
    <el-card class="dia">
      <div class="dia">
        <el-form :model="form" label-width="auto" style="max-width: 500px">
          <el-form-item label="姓名：">
            <el-input v-model="faform.faName" class="inp" />
          </el-form-item>
          <el-form-item label="身份证号：">
            <el-input v-model="faform.faIdnum" class="inp" />
          </el-form-item>
          <el-form-item label="性别：">
            <el-radio-group v-model="faform.faGender" class="inp">
              <el-radio value="0" size="large">女</el-radio>
              <el-radio value="1" size="large">男</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="年龄：">
            <el-input v-model="faform.faAge" class="inp" />
          </el-form-item>
          <el-form-item label="与老人关系：">
            <el-select
              v-model="faform.faRelation"
              placeholder="选择与老人关系"
              style="width: 220px"
            >
              <el-option
                v-for="item in relationselect"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <template v-if="faform.faRelation == 5">
            <el-form-item label="具体关系：">
              <el-input v-model="faform.faReldetails" class="inp" />
            </el-form-item>
          </template>
          <el-form-item label="联系电话：">
            <el-input v-model="faform.faPhone" class="inp" />
          </el-form-item>
          <el-form-item label="家庭住址：">
            <el-input v-model="faform.faMail" class="inp" />
          </el-form-item>
        </el-form>
      </div>
      <div class="dia-bt">
        <el-button type="primary" class="bu2" @click="editfa()">提交</el-button>
        <el-button type="primary" class="bu2" @click="dialogVisible3 = false"
          >取消</el-button
        >
      </div>
    </el-card>
  </el-dialog>
</template>
<script setup>
import { ref, reactive } from "vue";
import { useStore } from "vuex";
import { computed } from "vue";
const store = useStore();
const getAccId = computed(() => store.getters.getId);
const getUsername = computed(() => store.getters.getUsername);
const getPassword = computed(() => store.getters.getPassword);
const getType = computed(() => store.getters.getType);
// 导入封装的接口方法
import * as user from "@/api/user.js";
import * as account from "@/api/account.js";
const dialogVisible1 = ref(false);
const dialogVisible2 = ref(false);
const dialogVisible3 = ref(false);
let eldform = ref({
  eldId: "",
  eldName: "",
  eldGender: "",
  eldAge: "",
  eldIdNum: "",
  eldPhone: "",
  username: "",
  password: "",
  eldBed: "",
  nurseId: "",
});
let faform = reactive({
  faId: "",
  faName: "",
  faGender: "",
  faAge: "",
  faRelation: "",
  faReldetails: "",
  faIdnum: "",
  faPhone: "",
  faMail: "",
});
let tableData = ref([]);
const fgender = {
  0: "女",
  1: "男",
};
const frelation = {
  1: "子女",
  2: "兄弟姐妹",
  3: "甥侄",
  4: "孙辈",
  5: "其他",
};
const relationselect = [
  {
    value: "1",
    label: "子女",
  },
  {
    value: "2",
    label: "兄弟姐妹",
  },
  {
    value: "3",
    label: "甥侄",
  },
  {
    value: "4",
    label: "孙辈",
  },
  {
    value: "5",
    label: "其他",
  },
];
// 查找老人信息
const findelder = async () => {
  try {
    const res = await user.getElderAPI({
      accId: getAccId.value,
    });
    eldform.value.eldId = res.data.data[0].eldId;
    eldform.value.eldName = res.data.data[0].eldName;
    eldform.value.eldGender = res.data.data[0].eldGender;
    eldform.value.eldAge = res.data.data[0].eldAge;
    eldform.value.eldIdNum = res.data.data[0].eldIdNum;
    eldform.value.eldPhone = res.data.data[0].eldPhone;
    eldform.value.username = getUsername;
    eldform.value.password = getPassword;
    eldform.value.eldBed = res.data.data[0].eldBed;
    eldform.value.nurseId = res.data.data[0].nurseId;
    loaddata();
    //console.log(eldform.value);
  } catch (error) {
    console.error("获取管理员信息失败:", error);
  }
};
findelder();
// 修改老人信息(
let altereld = ref();
const modifyeld = () => {
  dialogVisible1.value = true;
  altereld.value = JSON.parse(JSON.stringify(eldform.value));
  //  console.log(altereld.value);
};
const changeeld = () => {
  const data1 = reactive({
    eldId: altereld.value.eldId,
    eldName: altereld.value.eldName,
    eldGender: altereld.value.eldGender,
    eldAge: altereld.value.eldAge,
    eldIdNum: altereld.value.eldIdNum,
    eldPhone: altereld.value.eldPhone,
    eldBed: altereld.value.eldBed,
    nurseId: altereld.value.nurseId,
  });
  user.editEldAPI(data1).then((resp) => {
    if (resp.data.code !== 2000) {
      ElMessage({
        type: "error",
        message: resp.data.message,
      });
      return;
    }
    ElMessage({
      type: "success1",
      message: resp.data.message,
    });
    const data2 = reactive({
      accId: getAccId,
      accUsername: altereld.value.username,
      accPassword: altereld.value.password,
      accType: getType,
    });
    account.editAccAPI(data2).then((resp) => {
      if (resp.data.code !== 2000) {
        ElMessage({
          type: "error",
          message: resp.data.message,
        });
        return;
      }
      ElMessage({
        type: "success2",
        message: resp.data.message,
      });
    });
    store.commit("saveAccount", data2);
    dialogVisible1.value = false;
  });
};
// 修改家属信息
const modifyfa = (row) => {
  dialogVisible3.value = true;
  faform.faName = row.faName;
  if (row.faGender == "男") {
    faform.faGender = "1";
  } else {
    faform.faGender = "0";
  }
  faform.faId = row.faId;
  faform.faAge = row.faAge;
  switch (row.faRelation) {
    case "子女":
      faform.faRelation = 1;
      break;
    case "兄弟姐妹":
      faform.faRelation = 2;
      break;
    case "甥侄":
      faform.faRelation = 3;
      break;
    case "孙辈":
      faform.faRelation = 4;
      break;
    default:
      faform.faRelation = 5;
      break;
  }
  faform.faReldetails = row.faReldetails;
  faform.faIdnum = row.faIdnum;
  faform.faPhone = row.faPhone;
  faform.faMail = row.faMail;
  console.log(antrelationselect[row.faRelation]);
};
const editfa = () => {
  const data = ref({
    faId: faform.faId,
    faAge: faform.faAge,
    faGender: faform.faGender,
    faRelation: faform.faRelation,
    faReldetails: faform.faReldetails,
    faIdnum: faform.faIdnum,
    faPhone: faform.faPhone,
    faMail: faform.faMail,
  });
  //console.log(data.value);
  user.editFamilyAPI(data.value).then((res) => {
    if (res.data.code !== 2000) {
      ElMessage({
        type: "error",
        message: res.data.message,
      });
      return;
    }
    ElMessage({
      type: "success",
      message: res.data.message,
    });
    loaddata();
    dialogVisible3.value = false;
  });
};
// 删除家属
const del = (row) => {
  let faRe = {};
  switch (row.faRelation) {
    case "子女":
      faRe = 1;
      break;
    case "兄弟姐妹":
      faRe = 2;
      break;
    case "甥侄":
      faRe = 3;
      break;
    case "孙辈":
      faRe = 4;
      break;
    default:
      faRe = 5;
      break;
  }
  const data = ref({
    faId: row.faId,
    faRelation: faRe * 10,
  });
  console.log(relationselect[row.faRelation]);
  user.editFamilyAPI(data.value).then((res) => {
    if (res.data.code !== 2000) {
      ElMessage({
        type: "error",
        message: res.data.message,
      });
      return;
    }
    ElMessage({
      type: "success",
      message: res.data.message,
    });
    loaddata();
    dialogVisible3.value = false;
  });
};

// 添加家属
const addfa = () => {
  dialogVisible2.value = true;
  faform.faName = "";
  faform.faGender = "1";
  faform.faAge = "";
  faform.faRelation = "1";
  faform.faReldetails = "";
  faform.faIdnum = "";
  faform.faPhone = "";
  faform.faMail = "";
};
const faddfa = () => {
  const data = ref({
    elderId: eldform.value.eldId,
    faName: faform.faName,
    faAge: faform.faAge,
    faGender: faform.faGender,
    faRelation: faform.faRelation,
    faReldetails: faform.faReldetails,
    faIdnum: faform.faIdnum,
    faPhone: faform.faPhone,
    faMail: faform.faMail,
  });
  user.addFamilyAPI(data.value).then((res) => {
    if (res.data.code !== 2000) {
      ElMessage({
        type: "error",
        message: res.data.message,
      });
      return;
    }
    ElMessage({
      type: "success",
      message: res.data.message,
    });
    loaddata();
    dialogVisible2.value = false;
  }); /**/
};
// 查找家属
const eid = ref(3);
const loaddata = () => {
  const params = reactive({
    elderId: eldform.value.eldId,
  });
  user.getFamilyAPI(params).then((reps) => {
    if (reps.data.code != 2000) {
      console.log("请求错误");
    } else {
      tableData.value = reps.data.data.map((item) => ({
        faId: item.faId,
        faName: item.faName,
        faGender: fgender[item.faGender],
        faAge: item.faAge,
        faRelation: frelation[item.faRelation],
        faReldetails: item.faReldetails,
        faIdnum: item.faIdnum,
        faPhone: item.faPhone,
        faMail: item.faMail,
      }));
      // console.log(tableData.value);
    }
  }); /**/
};
</script>
<style scoped>
.main {
  width: 1175px;
  height: 600px;

  .ca-main {
    width: 1175px;
    height: 600px;

    .ro {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      .im {
        width: 80%;
        height: 80%;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
    .co {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .id {
      width: 100%;
      height: 100%;
      flex-direction: flex;
      justify-content: center;
      align-items: center;
      .idcard {
        width: 80%;
        height: 80%;
        flex-direction: flex;
        justify-content: center;
        align-items: center;
        margin-left: 80px;
        .row1 {
          display: flex;
          flex-direction: row;
          justify-content: space-evenly;
          align-items: center;
          margin-top: 5px;
        }
        .row2 {
          display: flex;
          flex-direction: row;
          justify-content: space-evenly;
          align-items: center;
          margin-top: 5px;
        }
        .row3 {
          display: flex;
          flex-direction: row;
          justify-content: space-evenly;
          align-items: center;
          margin-top: 5px;
        }
      }
    }
    .table-field {
      width: 100%;
      margin-top: 15px;
      flex-direction: row;
      justify-content: center;
      align-items: center;
    }
    .bu {
      margin-top: 10px;
    }
  }
}
.dia {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .inp {
    width: 220px;
  }
  .dia-bt {
    display: flex;
    justify-content: center;
    align-items: center;
    .bu2 {
      margin-top: 12px;
      margin-left: 55px;
      margin-right: 55px;
    }
  }
}
</style>
